<template>
	<div class="app">
		<template v-for="(item, index) in tabs" :key="item">
			<button @click="itemClick(item)" :class="{ active: currentTab === item }">{{ item }}</button>
		</template>

		<!-- is中的组件必须来自两个地方,全局组件或局部组件 -->
		<div class="view">
			<!-- 内部的所有组件都会被缓存起来, 但是缓存的组件内部的状态不会改变 -->
			<!-- include: 只有包含的组件才会被缓存, 并且来自于组件定义时的name值 -->
			<keep-alive include="home, about">
				<component :is="currentTab"></component>
			</keep-alive>
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

import Home from './views/Home'
import About from './views/About.vue'

const AsyncCategory = defineAsyncComponent(() => import('./views/Category.vue'))

export default {
	components: {
		Home,
		About,
		Category: AsyncCategory,
	},
	data() {
		return {
			tabs: ['home', 'about', 'category'],
			currentTab: '',
		}
	},
	methods: {
		itemClick(tab) {
			this.currentTab = tab
		},
		homeBtnClick(payload) {
			console.log('payload: ', payload)
		},
	},
}
</script>

<style scoped>
.active {
	color: red;
}
</style>
